<!--
 * @Author       : tingke
 * @Date         : 2021-03-01 10:17:49
 * @LastEditors  : tingke
 * @LastEditTime : 2021-03-01 13:47:20
 * @FilePath     : /React/06_lifecycle.html
 * @Description  :
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- react.min.js - React 的核心库 -->
        <script src="./react/react.development.js"></script>
        <!-- react-dom.min.js - 提供与 DOM 相关的功能 -->
        <script src="./react/react-dom.development.js"></script>
        <!-- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。 -->
        <!-- 生产环境中不建议使用 -->
        <script src="./react/babel.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            class MyComponent extends React.Component {
                constructor() {
                    super();
                    this.state = {
                        msg: "Hello World",
                    };
                    console.log("constructor 初始化数据");
                    this.handleClick = this.handleClick.bind(this);
                }
                // 组件将要加载
                componentWillMount() {
                    // 请求数据 异步操作
                    console.log("componentWillmount 组件将要加载");
                }
                // 组件加载完成
                componentDidMount() {
                    console.log("componentDidMount 组件加载完成");
                }

                // 运行中阶段（更新阶段）
                componentWillReceiveProps(nextProps) {
                    console.log(
                        "componentWillReceiveProps 将要接收父组件传来的props",
                        nextProps
                    );
                }
                // 组件是不是应该更新  默认是返回true  false
                shouldComponentUpdate() {
                    console.log("shouldComponentUpdate 组件是不是应该更新");
                    return true;
                }
                // 组件将要更新
                componentWillUpdate(nextProps, nextState) {
                    console.log(
                        "componentWillUpdate 组件将要更新",
                        nextProps,
                        nextState
                    );
                }

                // 更新完成
                componentDidUpdate() {
                    console.log("componentDidUpdate 更新完成");
                }
                // 即将销毁
                componentWillUnmount() {
                    console.log("componentWillUnmount 即将销毁");
                }

                handleClick() {
                    this.setState({
                        msg: "new Hello World",
                    });
                }
                // 渲染
                render() {
                    console.log("render");
                    return (
                        <div>
                            <h2>{this.state.msg}</h2>
                            <h2>{this.props.abc}</h2>
                            <input
                                type="button"
                                defaultValue="更新数据"
                                onClick={this.handleClick}
                            />
                        </div>
                    );
                }
            }

            class App extends React.Component {
                constructor() {
                    super();
                    this.state = {
                        data: "old props",
                        onOff: true,
                    };
                    this.changeProps = this.changeProps.bind(this);
                    this.toggleChild = this.toggleChild.bind(this);
                }
                // 要进入第二阶段（更新阶段） 数据在发生变化
                changeProps() {
                    this.setState({
                        data: "new props 123456",
                    });
                }
                toggleChild() {
                    this.setState({
                        onOff: !this.state.onOff,
                    });
                }
                render() {
                    return (
                        <div>
                            {this.state.onOff ? (
                                <MyComponent
                                    abc={this.state.data}
                                ></MyComponent>
                            ) : (
                                ""
                            )}
                            <input
                                type="button"
                                defaultValue="更新props"
                                onClick={this.changeProps}
                            />
                            <input
                                type="button"
                                defaultValue="销毁组件"
                                onClick={this.toggleChild}
                            />
                        </div>
                    );
                }
            }

            ReactDOM.render(
                <App />,
                document.getElementById('example')
            );
        </script>
    </body>
</html>
